<template>
	<view>
		<view class="liangmian-remark">
			<view>{{rulesInfo.remark}}
			<!-- 赔率：<text class="liangmian-remark-rate">{{rulesInfo.rate}}</text> -->
			</view>
		</view>
		<u-grid :border="false" col="4" >
		    <u-grid-item v-for="(item,inx) in listData" :key="inx"   :bgColor="item.isCheck ? '#dd6161' : '#f2f2f2'" :customStyle="{width:'23%',marginRight:'2%',borderRadius:'10rpx',padding:'20rpx',marginTop:'10rpx',color:(item.isCheck ?'#FFFFFF' :'#000000')}" @click="checkGrid(item)">
				<view class="selectnum">
					<view :class="'selectnum__li'">
						<view :class="'selectnum__li__nub nub_color_'+item.color">{{item.nub}}</view>
						<view class="selectnum__li__xiao">{{item.title}}</view>
					</view>
				</view>
		    </u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	import {combination} from '@/utils/utils.js'
	export default {
		name:'lhc-number',
		props:{
			ball:{
				type:Array,
				default: () => {
				    return [];
				}
				
			},
			rulesInfo:{
				type:Object,
				default: () => {
				    return {};
				}
				
			},
			isAddOrder:{
				type:Boolean,
				default: () => {
				    return false;
				}
				
			}
		},
		data() {
			return {
				checkList:[],
				listData:[]
			}
		},
		watch:{
			isAddOrder(val){
				if(val){
					this.onAddOrder();
				}
			},
			rulesInfo(val){
				this.initList();
			}
		},
		mounted() {
			this.initList();
		},
		methods: {
			initList(){
				this.checkList = [];
				this.listData = JSON.parse(JSON.stringify(this.ball));
				console.log(this.listData)
			},
			checkGrid(item){
				item.isCheck = !item.isCheck;
				if(item.isCheck) {
					this.checkList.push({
						color : item.color,
						nub : item.nub,
						title : item.title,
						key : item.key
					});
				}else{
					for(var i in this.checkList) {
						if(this.checkList[i].nub == item.nub) {
							this.checkList.splice(i,1);
							break;
						}
					}
				}
			},
			onAddOrder(){
				if(this.checkList.length < this.rulesInfo.zhu) {
					this.$emit('click',false,{message:'请选择'+this.rulesInfo.zhu+'个或'+this.rulesInfo.zhu+'以上的号码'});
					return false;
				}
				let betting_code = JSON.parse(JSON.stringify(this.checkList));
				let amount = combination(betting_code,this.rulesInfo.zhu).length; 
				let money = this.rulesInfo.min_consume;
				let total_money = (parseFloat(money) * parseInt(amount));
				let  obj = {
					betting_code:betting_code,
					alias:this.rulesInfo.alias,
					betting_rate:this.rulesInfo.rate,
					betting_max_rate:this.rulesInfo.max_rate,
					pid:this.rulesInfo.pid,
					typeid:this.rulesInfo.typeid,
					title:this.rulesInfo.title,
					pid_name:this.rulesInfo.pid_name,
					multiple:1,
					amount:amount,
					money:money,
					total_money:total_money,
				}
				
				this.$emit('click',true,obj);
				this.initList();
				
			}
		}
	}
</script>

<style lang="less">
.selectnum{
	height: 100rpx;
	&__li{
		float: left;
		&__nub{
			color: #FFFFFF;
			font-size: 1rem;
			text-align: center;
			line-height: 60rpx;
			border-radius: 100%;
			width: 60rpx;
			height: 60rpx;
		}
		&__xiao{
			font-weight: bold;
			display: inline-block;
			width: 100%;
			text-align: center;
			line-height: 24rpx;
		}
	}
	
}
.liangmian-remark{
	font-size: 24rpx;
	
}
.liangmian-remark-rate{
	color:#dd6161;
	font-weight: bold;
}

.nub_color_blue{
	background-color: #409EFF;
}

.nub_color_green{
	background-color: #67C23A;
}
.nub_color_red{
	background-color: #F56C6C;
}
</style>
